import React from 'react';

interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
  width?: number | string;
  height?: number | string;
  className?: string;
}

export function Skeleton({ width = '100%', height = 16, className = '', style, ...rest }: SkeletonProps) {
  const resolvedStyle: React.CSSProperties = {
    width: typeof width === 'number' ? `${width}px` : width,
    height: typeof height === 'number' ? `${height}px` : height,
    borderRadius: '0.75rem',
    ...style
  };

  const baseClasses = 'relative overflow-hidden bg-white/20 dark:bg-white/10 animate-pulse';

  return (
    <div
      className={`${baseClasses} ${className}`.trim()}
      style={resolvedStyle}
      {...rest}
    />
  );
}
